<template>
  <div
    ref="refCharts"
    class="chart-box"
    :style="{ height: height, width: width }"
  ></div>
</template>

<script setup>
import { reactive, onMounted, ref, nextTick } from "vue";

import * as echarts from "echarts";
import useEcharts from "@/hooks/useEcharts";
import { _getBgColor } from "./config";

const refCharts = ref(null);

const { chart } = useEcharts();

const props = defineProps({
  className: {
    type: String,
    default: "chart",
  },
  width: {
    type: String,
    default: "100%",
    required: true,
  },
  height: {
    type: String,
    default: "100%",
    required: true,
  },
  chartData: {
    type: Object,
    required: true,
  },
});

// 定义变量内容

const state = reactive({});
const data = [];
for (let i = 0; i <7; ++i) {
  data.push(Math.round(Math.random() * 50));
}
const data1 = [];
for (let i = 0; i <7; ++i) {
  data.push(Math.round(Math.random() * 50));
}



function setOptions(chartData) {
  if (chart.value) {
    chart.value.setOption({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // Use axis to trigger tooltip
          type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
        },
      },
      grid: {
        left: "10",
        right: "20",
        bottom: "10",
        top: "15",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        axisLabel: {
          color: "#fff",
          fontSize: 12,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
            width: 1,
            type: "solid",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: _getBgColor(),
            width: 1,
            type: "solid",
          },
        },
      },
      yAxis: {
        type: "category",
        data: ["xx区1", "xx区2", "xx区3", "xx区4", "xx区5", "xx区6", "xx区7"],
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
            width: 1,
            type: "solid",
          },
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: _getBgColor(),
            width: 1,
            type: "solid",
          },
        },
        axisTick: {
          show: false,
        },
      },

      series: [
        {
          name: "Direct",
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          barWidth: "40%",
          itemStyle: {
            color: "#f7604a",
          },
          data: chartData.expectedData,
          realtimeSort: true,
        },
        {
          name: "Mail Ad",
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          barWidth: "40%",
          itemStyle: {
            color: "#66e1cc",
          },
          data:chartData.expectedData,
          realtimeSort: true,
        },
      ],
    });
  }
}
function initChart() {
  chart.value = echarts.init(refCharts.value, "macarons");
  setOptions(props.chartData);
}

/*动画*/
function run() {
  for (var i = 0; i < data.length; ++i) {
    if (Math.random() > 0.9) {
      data[i] += Math.round(Math.random() * 400);
    
    } else {
      data[i] += Math.round(Math.random() * 200);
    
    }
  } 
  for (var i = 0; i < data.length; ++i) {
    if (Math.random() > 0.9) {
    
      data1[i] += Math.round(Math.random() * 400);
    } else {
    
      data1[i] += Math.round(Math.random() * 200);
    }
  }
  
}
setTimeout(function () {
  run();
}, 0);
setInterval(function () {
  run();
}, 5000);

watchEffect(() => {
  if (props.chartData) {
    setOptions(props.chartData);
  }
});

onMounted(() => {
  nextTick(() => {
    initChart();
  });
});
</script>

<style lang="scss" scoped></style>
